<template>
	<div class="canvasTitle">
		<!-- 左 -->
		<div class="cancasTitle-left" v-if="hasScene">
			<el-switch v-model="modelSwitch" class="mr20" inactive-text="模型选择"></el-switch>
			<el-switch v-model="actionSwitch" inactive-text="交互选择"></el-switch>
		</div>
		<!-- 中 -->
		<div class="cancasTitle-middle">
			<span>{{ label }}</span>
		</div>
		<!-- 右 -->
		<div class="cancasTitle-right" v-if="hasScene">
			<div class="cancasTitle-right__select">
				<el-popover placement="bottom-end" width="66" popper-class="bottomPopver" trigger="hover">
					<span
						slot="reference"
						class="reference"
						:class="active ? 'active' : ''"
						@mouseenter="toggleClass"
						@mouseleave="toggleClass"
					>
						{{ definition ? '流 畅' : '高 清' }}
					</span>
					<template #default>
						<div class="bottomPopver-select" @mouseenter="active = false">
							<span @click="definition = 0">高 清</span>
							<span @click="definition = 1">流 畅</span>
						</div>
					</template>
				</el-popover>
			</div>
			<el-button icon="el-icon-refresh-right" @click="refresh"></el-button>
			<el-button type="primary">保存成我的模板</el-button>
			<!-- <el-button type="primary">开启BIM模式</el-button> -->
		</div>
	</div>
</template>
 
<script>
import { mapGetters } from 'vuex';

export default {
	name: 'CanvasTitle',
	data() {
		return {
			label: 'Demo' /* 展示信息 */,
			definition: 0 /* 0: 高清 1: 流畅 */,
			active: false /* hover 样式 */,
			modelSwitch: true /* 模型选择开关 */,
			actionSwitch: true /* 交互选择开关 */,
			refreshFunc: '' /* 刷新防抖函数 */
		};
	},
	computed: {
		...mapGetters('common', {
			hasScene: 'queryHasScene'
		})
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.refreshFunc = $xy.DB($ue4.refreshScene, 500);
		},

		// hover样式模拟
		toggleClass() {
			if (this.active) {
				setTimeout(() => {
					this.active = false;
				}, 350);
			} else {
				this.active = true;
			}
		},

		// 刷新项目
		refresh() {
			// 300ms的防抖
			this.refreshFunc();
		}
	}
};
</script>
 
<style lang="scss">
.bottomPopver-select {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 12px;
	color: $--xy-color-lighter;
	@include xy-stopselect;

	span {
		padding: 5px 6px;
		cursor: pointer;
		text-align: center;
		font-size: 12px;
		z-index: 98;

		&:first-child {
			border-radius: 3px 3px 0 0;
		}

		&:last-child {
			border-radius: 0 0 3px 3px;
		}

		&:hover {
			background-color: rgb(34, 119, 246);
			color: #fff;
		}
	}
}

.canvasTitle {
	font-size: 14px;
	height: 45px;
	border-bottom: 1px solid #0a0a0a;
	background: #25262a;
	padding: 8px 0;
	color: $--xy-color-light;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.cancasTitle-left {
		position: absolute;
		left: 15px;
	}

	.cancasTitle-right {
		position: absolute;
		right: 0;
		right: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__select {
			.reference {
				font-size: 12px;
				overflow: hidden;
				margin-right: 10px;
				padding: 5px 10px;
				cursor: pointer;
			}

			.reference.active {
				background-color: #111;
				color: #fff;
				border-radius: 3px;
			}
		}
	}
}
</style>